-->
</script>
<script type="text/javascript">
<!--
$(document).ready( function() {
  drawOnCanvas();
})

// square size:
var c;
var ctx;
var squareHeight;
var squareWidth;

function drawSquare(row, col, color) {
	var y = row*squareHeight;
	var x = col*squareWidth;
	ctx.fillStyle = color;
	ctx.fillRect(x+1, y+1, squareWidth-2, squareHeight-2);
}

function drawPath( path, color, circleColor ) {
	if (path.length>0) {
		var y = path[0][0]*squareHeight + squareHeight/2;
		var x = path[0][1]*squareWidth + squareWidth/2;
		
		// Draw starting circle:
		ctx.fillStyle = circleColor;
		ctx.beginPath();
		ctx.arc(x, y, squareHeight/2, 0, Math.PI*2, true);
		ctx.closePath();
		ctx.fill();

		// Drawing path:
		ctx.strokeStyle = "#808080";
		ctx.moveTo(x, y);
		var i;
		for (i=1; i<path.length; i++) {
			y = path[i][0]*squareHeight + squareHeight/2;
			x = path[i][1]*squareWidth + squareWidth/2;
			ctx.lineTo(x, y);
		}
		ctx.stroke();
	}
}

function drawOnCanvas() {
	c = document.getElementById("myCanvas");
	ctx=c.getContext("2d");
	squareHeight = Math.floor(500 / data.height);
	squareWidth  = Math.floor(500 / data.width);
	squareHeight = Math.max(Math.min(squareHeight, squareWidth), 3); // min size 3
	squareWidth  = squareHeight; // make width and height the same
	
	var i;
	for ( i=0; i<data.walls.length; i++ ) {
		drawSquare( data.walls[i][0], data.walls[i][1], "#3ac6e5" );
	}
	for ( i=0; i<data.goals.length; i++ ) {
		drawSquare( data.goals[i][0], data.goals[i][1], "#50ffa0" );
	}
	
	drawPath( data.path, "#505050", "#FF5070" );
}
-->
</script>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

</body>
<html>